<template>
	<!-- 点餐 -->
	<view class="order-page">
		<!-- 背景 -->
		<view class="bg">
			<image class="bg-img" src="/static/images/order-background.png" mode="aspectFill" />
		</view>

		<!-- 导航栏搜索 -->
		<wd-navbar safeAreaInsetTop :bordered="false">
			<template #title>
				<view class="title-bar-search">
					<search-input placeholder="请输入商品名称" @on-search="handleSearch" />
				</view>
			</template>
		</wd-navbar>

		<!-- 定位 -->
		<view class="location container m-auto">
			<view class="select-location">
				<view class="name">
					<view class="text truncate">蜜雪冰城</view>
					<view class="bi bi-chevron-right" style="font-size: 20rpx; margin: 0 10rpx"></view>
				</view>
				<view class="distance">
					<image class="location-icon" src="/static/svg-icon/location.svg" mode="aspectFill" />
					<text>距离您300m</text>
				</view>
			</view>
			<!-- 滑块切换 -->
			<slider-switch v-model="takeWay" activeText="堂食" inactiveText="外卖" :activeValue="1" :inactiveValue="2" />
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<wd-sidebar v-model="currentActive">
				<wd-sidebar-item v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.name" />
			</wd-sidebar>
			<view class="list">
				<view class="item" v-for="item in 10" :key="item" @click="popupVisible = true">
					<goods-item />
				</view>
			</view>
		</view>

		<!-- 选择商品规格 -->
		<wd-popup :z-index="50" position="bottom" @close="onPopupClose" v-model="popupVisible"
			:safe-area-inset-bottom="true">
			<view class="popup-content">
				<!-- 商品图片 -->
				<swiper class="goods-img-swiper" circular :indicator-dots="swiperConfig.indicatorDots"
					:autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration">
					<swiper-item>
						<image class="swiper-img" src="/static/images/goods-details.png" mode="aspectFill" />
					</swiper-item>
					<swiper-item>
						<image class="swiper-img" src="/static/images/goods-details.png" mode="aspectFill" />
					</swiper-item>
					<swiper-item>
						<image class="swiper-img" src="/static/images/goods-details.png" mode="aspectFill" />
					</swiper-item>
				</swiper>
				<!-- 商品详情、规格选择 -->
				<view class="goods-details">
					<view class="name">鸭屎香柠檬茶</view>
					<view class="desc">
						雷公鸭霸气推荐，被“雷击”过的味道！优选广东潮州的凤凰单丛雷扣柴，茶汤金亮，高山气韵雄浑勃发，芝兰花香清新悠扬。加入香水柠檬，内敛与清爽激发香气层次。入口后,茶气充盈柔滑,经舌尖流转入喉,回甘饱满悦然，仿佛置身高山之競，每一口茶，都令人心旷神怡。杯型:600m
					</view>
					<!-- 选择规格 -->
					<view class="select">
						<view class="title">温度</view>
						<view class="options">
							<view class="item flex-center">
								<image class="active-icon" src="/static/svg-icon/star.svg" mode="aspectFill" />
								<text>正常冰</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 购买数量 -->
				<view class="purchase-option">
					<view class="price">
						<view class="left">
							<view class="price-num">
								<text class="unit">¥</text>
								<text class="num">16</text>
							</view>
							<view class="options">
								<image class="love-icon" src="/static/svg-icon/love.svg" mode="aspectFill" />
								<text>正常冰，7分糖(标准甜)</text>
							</view>
						</view>
						<view class="right">
							<wd-input-number v-model="goodsCount" :max="99" />
						</view>
					</view>
					<view class="buy-or-add">
						<view class="buy flex-center">立即购买</view>
						<view class="add flex-center">加入购物车</view>
					</view>
				</view>
			</view>
		</wd-popup>

		<!-- 自定义 tabBar -->
		<custom-tabbar />
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		ref,
		watch
	} from 'vue';
	import GoodsItem from '/components/GoodsItem/index.vue';
	import SearchInput from '/components/SearchInput/index.vue';
	import SliderSwitch from '/components/SliderSwitch/index.vue';

	// 轮播图配置
	const swiperConfig = {
		duration: 500, // 切换动画时长
		interval: 5000, // 自动切换时间间隔
		autoplay: true, // 是否自动切换
		indicatorDots: false, // 是否显示指示点
	};

	// 搜索商品
	const handleSearch = (keyword) => {
		console.log('keyword: ', keyword);
	};

	// 取餐方式
	const takeWay = ref(1);
	watch(takeWay, (val) => {
		console.log('takeWay: ', val);
	});

	// 分类列表
	const currentActive = ref(1);
	const categoryList = ref([{
			id: 1,
			name: '新品上市'
		},
		{
			id: 2,
			name: '招牌柠檬茶'
		},
		{
			id: 3,
			name: '醇香奶茶'
		},
	]);

	const popupVisible = ref(false);
	const onPopupClose = () => {
		console.log('onPopupClose');
	};

	// 商品数量选择
	const goodsCount = ref(1);
</script>

<style lang="scss" scoped>
	// 背景
	.bg {
		top: 0;
		z-index: 0;
		width: 100%;
		height: 380rpx;
		position: fixed;

		.bg-img {
			width: 100%;
			height: 100%;
		}
	}

	// 标题栏搜索
	.title-bar-search {
		left: 0;
		height: 100%;
		display: flex;
		overflow: hidden;
		padding: 0 40rpx;
		position: absolute;
		align-items: center;
		width: calc(100% - 80rpx);
	}

	:deep(.wd-navbar) {
		background: transparent !important;
	}

	:deep(.wd-search) {
		background: transparent !important;
	}

	:deep(.wd-search__input) {
		// background-color: white;
	}

	// 定位
	.location {
		display: flex;
		height: 106rpx;
		margin-top: 50rpx;
		position: relative;
		align-items: center;
		justify-content: space-between;

		.select-location {
			width: 400rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			.name {
				width: 100%;
				display: flex;
				color: #3b3b3b;
				font-size: 32rpx;
				align-items: center;

				.text {
					max-width: 90%;
				}
			}

			.distance {
				width: 100%;
				display: flex;
				color: #b3b3b3;
				font-size: 24rpx;
				margin-top: 24rpx;
				align-items: center;
				justify-content: left;

				.location-icon {
					width: 32rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	// 商品列表
	.goods-list {
		top: 230rpx;
		/* #ifdef MP-WEIXIN */
		top: 320rpx;
		/* #endif */
		width: 100%;
		display: flex;
		bottom: 100rpx;
		position: fixed;
		margin-top: 28rpx;
		background-color: white;
		bottom: calc(100rpx + env(safe-area-inset-bottom));

		.list {
			height: 100%;
			padding: 0 20rpx;
			overflow-y: scroll;
			width: calc(100% - 215rpx);

			.item {
				margin: 40rpx 0;
			}
		}
	}

	:deep(.wd-sidebar) {
		width: 215rpx;

		.wd-sidebar-item--active {
			color: #3b3b3b;
			font-size: 30rpx !important;
			position: relative;
			background: linear-gradient(90deg,
					rgba(225, 240, 211, 1) 0%,
					rgba(225, 243, 212, 0) 100%);

			&::before {
				width: 12rpx;
				height: 100%;
				border-radius: 0;
				background-color: #8cd247;
			}
		}

		.wd-sidebar-item {
			width: 100%;
			color: #3b3b3b;
			font-size: 26rpx !important;
			background-color: #f8fafb;
		}
	}

	// 弹出层内容
	.popup-content {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: white;

		// 商品图片
		.goods-img-swiper {
			width: 100%;
			height: 420rpx;

			.swiper-img {
				width: 100%;
				height: 100%;
			}
		}

		// 商品详情、规格选择
		.goods-details {
			padding: 30rpx;

			.name {
				color: #3b3b3b;
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.desc {
				color: #a2a2a2;
				font-size: 24rpx;
			}

			// 选择规格
			.select {
				width: 100%;
				margin-top: 32rpx;

				.title {
					color: #666666;
					font-size: 26rpx;
				}

				.options {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.item {
						color: #fff;
						font-size: 24rpx;
						margin-top: 16rpx;
						margin-right: 20rpx;
						padding: 14rpx 20rpx;
						border-radius: 10rpx;
						background-color: $primary-color;

						.active-icon {
							width: 26rpx;
							height: 24rpx;
							margin: 0 5rpx;
						}
					}
				}
			}
		}

		// 购买数量
		.purchase-option {
			bottom: 0;
			width: 100%;
			height: 260rpx;
			position: absolute;
			background-color: white;
			box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);

			.price {
				display: flex;
				padding: 0 40rpx;
				margin-top: 10rpx;
				align-items: center;
				justify-content: space-between;

				.left {
					.price-num {
						.unit {
							font-size: 24rpx;
						}

						.num {
							font-size: 40rpx;
							font-weight: bold;
						}
					}

					.options {
						color: #666;
						display: flex;
						font-size: 20rpx;
						align-items: center;

						.love-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
					}
				}
			}

			.buy-or-add {
				width: 100%;
				display: flex;
				margin-top: 20rpx;
				align-items: center;
				justify-content: space-evenly;

				.buy {
					color: $primary-color;
					box-sizing: border-box;
					border: 2rpx solid rgba(140, 213, 72, 1);
				}

				.add {
					color: #fff;
					background-color: $primary-color;
				}

				.buy,
				.add {
					width: 320rpx;
					height: 80rpx;
					font-size: 32rpx;
					border-radius: 80rpx;
				}
			}
		}
	}

	:deep(.wd-popup) {
		height: 1380rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}

	:deep(.wd-input-number) {
		border-radius: 10rpx;
		border: 2rpx solid rgba(179, 179, 179, 1);

		.wd-input-number__action-icon {
			color: $primary-color;
		}

		.is-disabled {
			.wd-input-number__action-icon {
				color: #a2a2a2;
			}
		}

		.wd-input-number__action {
			&::after {
				border-left: 2rpx solid rgba(179, 179, 179, 1) !important;
				border-right: 2rpx solid rgba(179, 179, 179, 1) !important;
			}
		}
	}
</style>